<style>
    #spec_item_table td {text-align: center;}
</style>
<table id="spec_table" class="table table-bordered">
    {volist name="specList" id="vo"}
    <tr>
        <td style="width:100px">{$vo.name}：</td>
        <td>
            {volist name="vo[item]" id="v"}
                <button type="button" value="{$v.item}" data-spec_id="{$v.spec_id}" data-item_id="{$v.id}" class="btn btn-default" style="margin-right:5px">{$v.item}</button>
            {/volist}
            <input type="text" name="spec_item" data-spec_id="{$vo.id}" class="form-control" style="width:100px; vertical-align:middle; display:inline">&nbsp;&nbsp;
            <a href="javascript:;" onclick="addSpecItem(this)">添加</a>
            <a href="javascript:;" onclick="delSpecItem(this)">删除</a>
        </td>
    </tr>
    {/volist}
</table>
<div id="spec_item_table"></div>

<!-- <script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script> -->
<script type="text/javascript">

    function editOnload(){
      var gid = {$gid};
      if(gid){
          getSpecArr();
      }
    }

    editOnload();

    // 添加规格项
    function addSpecItem(obj){
        var spec_item = $(obj).siblings('input[name="spec_item"]').val();
        spec_item = $.trim(spec_item);
        if(spec_item.length == 0){
            layer.alert('请输入规格项', {icon:2});
            return false;
        }
        var spec_id = $(obj).siblings('input[name="spec_item"]').data('spec_id');

        $.ajax({
            type:'POST',
            data:{'spec_id':spec_id, 'spec_item':spec_item},
            dataType:'json',
            url:"/index.php/admin/goods/addSpecItem",
            success:function(data){
                 $(obj).siblings('input[name="spec_item"]').val('');
                 var str = '<button type="button" value="'+spec_item+'" data-spec_id="'+spec_id+'" data-item_id="'+data.msg+'" class="btn btn-default" style="margin-right:5px">'+spec_item+'</button>';
                 $(obj).siblings('input[name="spec_item"]').before(str);
                 // 获取规格及规格项的二维数组
                 getSpecArr();
            }
        });
    }

    function getSpecArr(){
        // 返回规格及规格项的二维数组
        var spec_arr = {}; // {"1":[7,8],"2":[9]}
        // 获取最新的规格和规格项
        $('#spec_table button').each(function(){
            var spec_id = $(this).data('spec_id');
            var item_id = $(this).data('item_id');
            // 判断对象是否包含特定的自身属性
            if(!spec_arr.hasOwnProperty(spec_id)){
                spec_arr[spec_id]=[];
            }
            spec_arr[spec_id].push(item_id);
        });
        // layer.alert(JSON.stringify(spec_arr));
        // 动态显示输入框
        getSpecItem(spec_arr);
    }

    function getSpecItem(spec_arr){
        var gid = {$gid};
        $.ajax({
            type:'POST',
            data:{'spec_arr':spec_arr},
            // dataType:'json',
            url:"/index.php/admin/goods/getSpecItem/gid/"+gid,
            success:function(data){
                $('#spec_item_table').html('');
                $('#spec_item_table').append(data);
                // 合并单元格
                merge();
            }
        });
    }

    // 删除规格项
    function delSpecItem(obj){
        var spec_item = $(obj).siblings('input[name="spec_item"]').val();
        spec_item = $.trim(spec_item);
        if(spec_item.length == 0){
            layer.alert('请输入规格项', {icon:2});
            return false;
        }else{
            $(obj).siblings('button[value="'+spec_item+'"]').remove();
            $(obj).siblings('input[name="spec_item"]').val('');
            getSpecArr();
        }
    }

    // 合并单元格
    function merge() {
       //要合并的tableID
       var tab = document.getElementById("spec_input_table");
       //maxCol：合并单元格作用到多少列
       var maxCol = 2, val, count, start;
       if (tab != null) {
           for (var col = maxCol - 1; col >= 0; col--) {
               count = 1;
               val = "";
               for (var i = 0; i < tab.rows.length; i++) {
                   if (val == tab.rows[i].cells[col].innerHTML) {
                       count++;
                   } else {
                       if (count > 1) { //合并
                           start = i - count;
                           tab.rows[start].cells[col].rowSpan = count;
                           for (var j = start + 1; j < i; j++) {
                               tab.rows[j].cells[col].style.display = "none";
                           }
                           count = 1;
                       }
                       val = tab.rows[i].cells[col].innerHTML;
                   }
               }
               if (count > 1) {
                   //合并，最后几行相同的情况下
                   start = i - count;
                   tab.rows[start].cells[col].rowSpan = count;
                   for (var j = start + 1; j < i; j++) {
                       tab.rows[j].cells[col].style.display = "none";
                   }
               }
           }
       }
    }
</script>
